<template>
	<div>
		<use-table ref="tbl"></use-table>
		<div class="container last_container use-table">
			<div class="dflex_vertical_c margin_b_20 table-head">
				<div class="dflex_vertical_c">
					<div class="search_name">笔记标题：</div>
					<el-input v-model="req.note_title" placeholder="请输入" class="search_input" @change="search" clearable></el-input>
				</div>
				<div class="dflex_vertical_c margin_l_10">
					<div class="search_name">状态：</div>
					<el-select v-model="req.state" class="search_input" @change="search" clearable>
						<el-option v-for="item in stateOptions" :key="item.value" :label="item.label" :value="item.value"></el-option>
					</el-select>
				</div>
				<el-button size="mini" :loading="searchBtnLoading" class="search-btn margin_l_10" @click="search">搜索</el-button>
			</div>
			<el-table ref="etbl" :height="tblHeight" v-loading="tableLoading" :data="tableDatas" highlight-current-row @sort-change="sortable">
				<el-table-column label="笔记" align="center" width="330">
					<template slot-scope="scope">
						<div class="dflex_vertical_c">
							<use-carousel :width="84" :height="84" :imgs="scope.row.note_imgs" :video="scope.row.note_video"></use-carousel>
							<div class="left_just margin_l_10">
								<el-popover
									popper-class="use_popover"
									:open-delay="200"
									:close-delay="40"
									placement="right"
									:title="scope.row.note_title"
									trigger="hover"
									:content="scope.row.note_desc || '--'"
								>
									<div slot="reference" class="dflex_d_c">
										<div class="ellipsis crpr">{{ scope.row.note_title }}</div>
										<div class="ellipsis crpr">{{ scope.row.note_desc }}</div>
									</div>
								</el-popover>
							</div>
						</div>
					</template>
				</el-table-column>
				<el-table-column label="获赞数" align="center">
					<template slot-scope="scope">
						<div>{{ scope.row.note_praise || 0 }}</div>
					</template>
				</el-table-column>
				<el-table-column label="收藏数" align="center">
					<template slot-scope="scope">
						<div>{{ scope.row.note_collect || 0 }}</div>
					</template>
				</el-table-column>
				<el-table-column property="state" label="状态" align="center"></el-table-column>
				<el-table-column property="create_time" sortable="custom" label="发布时间" align="center"></el-table-column>
				<el-table-column label="操作" align="center">
					<template slot-scope="scope">
						<el-tooltip v-if="scope.row.state == '正常'" :open-delay="350" content="下架" placement="top" :hide-after="1000" :enterable="false" effect="light">
							<el-button circle size="medium" icon="el-icon-download" class="table-btn" @click="noteOut(scope.row._id)"></el-button>
						</el-tooltip>
					</template>
				</el-table-column>
				<div slot="empty"><el-empty description=" "></el-empty></div>
			</el-table>
			<el-pagination
				background
				:current-page="req.page"
				:page-sizes="[10, 20, 30, 50, 100]"
				:page-size="req.rows"
				layout="total, sizes, prev, pager, next, jumper"
				:total="tableTotal"
				@size-change="sizeChange"
				@current-change="currentChange"
			></el-pagination>
		</div>
	</div>
</template>

<script>
const __name = 'wmzmall-shopping-note';
export default {
	data() {
		return {
			dataId: '',
			tableLoading: false,
			stateOptions: [
				{
					value: '',
					label: '全部'
				},
				{
					value: '正常',
					label: '正常'
				},
				{
					value: '已违规',
					label: '已违规'
				}
			],
			req: {
				page: 1,
				rows: 10,
				orderby: 'create_time desc',
				note_title: '',
				state: ''
			},
			tblHeight: 0,
			tableDatas: [],
			tableTotal: 0,
			searchBtnLoading: false
		};
	},
	methods: {
		async loadData(callback) {
			this.tableLoading = true;
			await this.$db[__name]
				.where({ create_uid: this.dataId })
				.whereif(this.req.note_title, { note_title: new RegExp(this.$api.filterRegexpKey(this.req.note_title), 'i') })
				.whereif(this.req.state, { state: this.req.state })
				.totable(this.req)
				.then(res => {
					if (res.code == 200) {
						res.datas.rows.forEach((row, idx) => {
							row.create_time = new Date(row.create_time).format();
							row.imgs = [row.order_member_headimg || 'https://7463-tcb-rflrz31u8yan4rr9ad60d-268679-1308293149.tcb.qcloud.la/1659579992133_0.png'];
						});

						this.tableDatas = res.datas.rows;
						this.tableTotal = res.datas.total;

						if (typeof callback === 'function') {
							callback();
						}
					}
					this.searchBtnLoading = false;
					this.tableLoading = false;
				});
		},
		search() {
			this.req.page = 1;
			this.$api.storagePaginationPage(this.req.page, this.$route.path + '-note');
			this.searchBtnLoading = true;

			this.loadData(() => {
				this.$refs.etbl.bodyWrapper.scrollTop = 0;
			});

			uni.setStorage({
				key: '__search' + this.$route.path + '-note',
				data: this.req
			});
		},
		sortable(column) {
			if (column.order) {
				column.order = column.order.replace('ending', '');
			}

			this.req.orderby = column.prop + ' ' + (column.order || 'desc');

			this.loadData(() => {
				this.$refs.etbl.bodyWrapper.scrollTop = 0;
			});
		},
		noteOut(id) {
			this.$confirm(`此操作将下架该笔记！`, '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning'
			}).then(() => {
				this.$db[__name].update(id, { state: '已违规' }).then(res => {
					if (res.code == 200) {
						this.loadData();
					}
				});
			});
		},
		sizeChange(size) {
			this.$api.storagePaginationRows(size, this.$route.path + '-note');
			this.req.page = 1;
			this.$api.storagePaginationPage(this.req.page, this.$route.path + '-note');
			this.req.rows = size;

			this.loadData(() => {
				this.$refs.etbl.bodyWrapper.scrollTop = 0;
			});
		},
		currentChange(current) {
			this.$api.storagePaginationPage(current, this.$route.path + '-note');
			this.req.page = current;

			this.loadData(() => {
				this.$refs.etbl.bodyWrapper.scrollTop = 0;
			});
		}
	},
	created() {
		let __search = uni.getStorageSync('__search' + this.$route.path + '-note');
		if (__search) {
			this.req = __search;
		}

		this.req.page = uni.getStorageSync('__paginationPage' + this.$route.path + '-note') || 1;
		this.req.rows = uni.getStorageSync('__paginationRows' + this.$route.path + '-note') || 10;

		this.dataId = this.$route.query.id || '';
		this.loadData(() => {
			this.$nextTick(() => {
				this.$api.scrollToStorage('.el-table__body-wrapper', this.$route.path + '-note');
			});
		});
	},
	mounted() {
		this.$nextTick(() => {
			this.$api.scrollOnStorage('.el-table__body-wrapper', this.$route.path + '-note');
		});
	},
	updated() {
		if (!this.tblHeight) {
			this.tblHeight = this.$refs.tbl.tblHeight;
		}
	}
};
</script>

<style></style>
